<!--  -->
<template>
  <div class="discountCoupon">
    <table-query-header>
      <template #item2="{ setLabel }">
        <div :label="setLabel('点击人号码')">
          <a-input v-model:value="queryParam.userPhone" placeholder="" />
        </div>
      </template>
      <template #item3="{ setLabel }">
        <div :label="setLabel('时间段')">
          <a-range-picker
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
            @change="bptjTimeChange"
            :value="createValue"
          />
        </div>
      </template>
      <template #buttons>
        <a-button type="primary" @click="subquestion">查询</a-button>
        <a-button style="margin-left: 8px" @click="reset">重置</a-button>
      </template>
    </table-query-header>
    <a-button type="primary" style="margin-bottom: 20px" @click="handleExport">导出报表</a-button>

    <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" rowKey="id" @change="tablePaginationChange"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
import bgUserApi from '@/api/bg_user/index'
import { formatDate } from '@/utils/common'
import dayjs, { Dayjs } from 'dayjs'
import { jsonToSheetXlsx, erportXlsx } from '@/components/Excel'
export default defineComponent({
  components: {
    DynamicTable,
    TableQueryHeader
  },
  setup() {
    onMounted(() => {
      subquestion()
    })
    const tableRef = ref<any>(null)
    const bptjTimeChange = (date, dateString) => {
      state.createValue=date
      state.queryParam.startT = dateString[0]
      state.queryParam.endT = dateString[1]
    }
    const state = reactive({
      queryParam: {
        // 表格查询参数
        busName: '',
        startT: '',
        endT: '',
        status: '',
        busType: 1,
        busAlias: '',
        userPhone: '',
      } as any,
      createValue:[],
      columns: [
        {
          title: '问卷调查结果',
          dataIndex: 'issueAnswer'
        },
        {
          title: '领取人号码',
          dataIndex: 'userPhone'
        },
        {
          title: '点击时间',
          dataIndex: 'updateTime',
        }
      ],
      tableLoading: false,
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          state.rowSelection.selectedRowKeys = selectedRowKeys
        },
        selectedRowKeys: []
      },
      pagination: {
  			current:1,//分页的索引
  			total: 0,
  			pageSize: 10, //每页中显示10条数据
  			showSizeChanger: false,//不设置每页的数据条数
  			size:"small",
  			pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
  			showTotal: (total, range) => {
          		return (
            		"第" +
            		range[0] +
            		"到第" +
            		range[1] +
            		"条" +
            		"  " +
            		"共" +
            		total +
            		"条"
          		);
        	},  //分页中显示总的数据
		} as any,
    dataSource:[]
    })
    function getTableDaTa(params) {
      console.log('%c 🥓 params: ', 'font-size:20px;background-color: #465975;color:#fff;', params)
      const myParams = { ...params, ...state.queryParam }
      console.log(myParams, '查询参数')
      return bgUserApi.queryRecord(myParams)
    }
    const handleExport = () => {
 let req = {
        current: 1,
        limit: 99999999,
        ...state.queryParam
      }
      bgUserApi.checkquestionlist(req).then((res: any) => {
                res.data.forEach(item => {
          item.updateTime=formatDate(item.updateTime)
        });
        erportXlsx(state.columns, res.data)
      })
    }
    const reset = () => {
      state.queryParam ={}
      
      state.pagination ={}
      state.createValue=[]
    }
    function handleAdd() {
      console.log(
        '%c 🍪 queryParam.time: ',
        'font-size:20px;background-color: #FFDD4D;color:#fff;',
        state.queryParam.time
      )
    }
    // function subclick() {
    //   let req = {
    //     current:state.pagination.current,
    //     limit:state.pagination.pageSize,
    //     startTime:state.queryParam.startT,
    //     endTime:state.queryParam.endT,
    //     userPhone:state.queryParam.userPhone
    //   }
    //   bgUserApi.checkclicklist(req).then((res: any) => {
    //     console.log('点击列表', res)
    //     res.data.forEach(item => {
    //       item.updateTime=formatDate(item.updateTime)
    //     });
    //     state.pagination.total=res.total
    //     state.dataSource=res.data
    //   })
    // }
    function subquestion() {
      let req = {
        current:state.pagination.current,
        limit:state.pagination.pageSize,
        startTime:state.queryParam.startT,
        endTime:state.queryParam.endT,
        userPhone:state.queryParam.userPhone
      }
      bgUserApi.checkquestionlist(req).then((res: any) => {
        console.log('调查问卷表', res)
         res.data.forEach(item => {
          item.updateTime=formatDate(item.updateTime)
        });
        state.pagination.total=res.total
        state.dataSource=res.data
      })
    }
    function tablePaginationChange(e){
            // let queryData = {
            //     current_page:e.current,//当前页数
            //     per_page:e.pageSize//每页显示条数
            // };
            // // 合并原有的筛选条件，这样才能在原有的基础上进行分页
            // Object.assign(queryData,this.queryData)
            // subclick(queryData)
            state.pagination.current=e.current
            console.log(e.current)
            subquestion()
        }
    return {
      bptjTimeChange,
      getTableDaTa,
      tableRef,
      handleExport,
      reset,
      subquestion,
      ...toRefs(state),
      tablePaginationChange,
    }
  }
})
</script>
<style lang="scss" scoped></style>
